<script setup lang="ts">
import { ref, onMounted, watch } from "vue";

defineOptions({
  name: "CapsuleChart"
});

// 当前选中的胶囊索引
const activeIndex = ref(0);
const list = ref([
  {
    id: 1,
    name: "广东",
    data: [
      {
        name: "广州",
        value: 208
      },
      {
        name: "深圳",
        value: 220
      },
      {
        name: "东莞",
        value: 123
      },
      {
        name: "佛山",
        value: 55
      },
      {
        name: "中山",
        value: 98
      }
    ]
  },
  {
    id: 2,
    name: "河南",
    data: [
      {
        name: "南阳",
        value: 160
      },
      {
        name: "周口",
        value: 67
      },
      {
        name: "漯河",
        value: 123
      },
      {
        name: "郑州",
        value: 200
      },
      {
        name: "西峡",
        value: 90
      }
    ]
  },
  {
    id: 3,
    name: "湖南",
    data: [
      {
        name: "长沙",
        value: 188
      },
      {
        name: "株洲",
        value: 100
      },
      {
        name: "湘潭",
        value: 125
      },
      {
        name: "衡阳",
        value: 60
      },
      {
        name: "岳阳",
        value: 90
      }
    ]
  }
]);
const config = ref({
  data: [],
  unit: "万/单位",
  colors: ["#e062ae", "#fb7293", "#e690d1", "#32c5e9", "#96bfff"],
  showValue: true
});

const initCapsuleChart = () => {
  config.value.data = list.value[activeIndex.value].data;
};
onMounted(() => {
  initCapsuleChart();
});
watch(activeIndex, () => {
  initCapsuleChart();
});
</script>

<template>
  <div class="box">
    <div class="title">
      <span>销量TOP5</span>
    </div>
    <div class="list">
      <div
        v-for="(item, index) in list"
        :key="item.id"
        :class="{ active: activeIndex === index }"
        class="item"
        @click="activeIndex = index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="chart-container">
      <dv-capsule-chart :config="config" />
    </div>
  </div>
</template>

<style lang="scss" scoped>


// 响应式断点
@media screen and (width <= 768px) {
  .box {
    .list {
      .item {
        margin: 5px;
      }
    }
  }
}

@media screen and (width <= 480px) {
  .box {
    padding: 15px;

    .list {
      margin: 10px 0;

      .item {
        margin: 3px;
      }
    }
  }
}

.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: clamp(20px, 3vw, 20px);

  .title {
    margin-bottom: clamp(10px, 2vw, 20px);
    font-size: clamp(16px, 2vw, 20px);
    text-align: center;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(5px, 1vw, 10px);
    align-items: center;
    justify-content: center;
    margin: clamp(10px, 2vw, 20px);

    .item {
      padding: clamp(3px, 1vw, 5px) clamp(8px, 1.5vw, 10px);
      font-size: clamp(12px, 1.5vw, 14px);
      cursor: pointer;
      background-color: rgb(255 255 255 / 20%);
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        background-color: rgb(255 255 255 / 30%);
      }

      &.active {
        background-color: rgb(255 255 255 / 50%);
      }
    }
  }

  .chart-container {
    flex: 1;
    width: 100%;
    min-height: 200px;

    :deep(.dv-capsule-chart) {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
